<template>
  <div class="pageRank">
    <div class="nav">
      <div class="title">排名</div>
      <div class="title ad">页面</div>
      <div class="title">访客次数</div>
    </div>
    <div class="lis" v-for="(item, index) in list" :key="index">
      <div class="img">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/customerCenter/image4@2x.png" alt="" v-if="index == 0" />
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/customerCenter/image5@2x.png" alt="" v-else-if="index == 1" />
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/customerCenter/image6@2x.png" alt="" v-else-if="index == 2" />
        <div v-else class="numInd">{{ index + 1 }}</div>
      </div>
      <template v-if="item.page_type != 'goods'">
        <div class="contenbox" v-if="!fun.isUrl(item.url)" @click="toUrl(item.url)"><span class="urlLine">{{ item.url }}</span></div>
        <div class="contenbox" v-else v-clipboard:copy="item.url" v-clipboard:success="onCopy"><span class="urlLine">{{ item.url }}</span></div>
      </template>
      <template v-else>
        <div class="contenbox">
          <div class="cimg">
            <img :src="item.thumb" alt="" />
          </div>
          <div class="cRight" @click="toUrl(item.url)" v-if="!fun.isUrl(item.url)">
            <div class="ctitle">{{ item.title }}</div>
            <div class="cprice">￥{{item.price}}</div>
          </div>
          <div class="cRight" v-clipboard:copy="item.url" v-clipboard:success="onCopy" v-else>
            <div class="ctitle">{{ item.title }}</div>
            <div class="cprice">￥{{item.price}}</div>
          </div>
        </div>
      </template>
      <div class="num">
        {{ item.top }}
        <img v-if="index <= 2" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FcustomerCenter%2Fimage7%402x.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  props: {
    list: {
      type: Array,
      default: []
    },
    display_set: {
      type: null
    }
  },
  data() {
    return {};
  },
  methods: {
    onCopy() {
      Toast({
        message: "复制成功",
        position: "bottom",
        duration: 1500
      });
    },
    toUrl(url) {
      window.location.href = url;
    }
  }
};
</script>
<style lang="scss" scoped>
.pageRank {
  padding: 1rem 0.75rem;
  margin: 0.75rem;
  background: #fff;
  border-radius: 0.5rem;
  .lis {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e7e7e7;
    padding: 0.8125rem 0;
    .img {
      flex: 0.5;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      .numInd {
        font-size: 0.875rem;
        color: #333333;
        font-weight: bold;
      }
      img {
        width: 2.6875rem;
        height: 2.0625rem;
      }
    }
    .contenbox {
      flex: 1;
      text-align: left;
      overflow: hidden;
      color: #02bbff;
      display: flex;
      .urlLine{
        text-decoration: underline;
      }
      .cRight {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .ctitle {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-decoration: underline;
        }
        .cprice{
          color: #F84949;
          font-size: 0.75rem;
          text-decoration: none;
        }
      }
      .cimg {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.25rem;
        margin-right: 0.325rem;
        img {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 0.25rem;
        }
      }
    }
    .num {
      flex: 0.5;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.875rem;
      color: #333333;
      font-weight: bold;
      img {
        width: 0.5rem;
        height: 0.75rem;
        margin: 0;
      }
    }
  }
  .lis:last-child {
    border-bottom: none;
  }
  .nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    .title {
      flex: 0.5;
    }
    .ad {
      flex: 1;
    }
  }
}
</style>